<!-- parent在app.vue中被渲染，child在Parent.vue中被渲染
 app.vue是爷爷，parent是父亲，child是儿子
-->
<template>
  <h3>parent</h3>
  <!-- 注意传递多个数据时，属性之间用 空格 隔开，我刚开始写错了，导致数据传递失败 -->
   <!-- 静态数据传递 -->
  <!-- <Child title="Parent向child传递的数据" demo="Parent向child传递的数据2" /> -->

  <!-- 动态数据传递 -->
  <Child :title="message" :age="age" :names="names" :obj="obj" @someEvent="handleSomeEvent" />
  <!-- 组件事件@someEvent="handleSomeEvent"  -->
   <p>父组件触发的someEvent事件,接收来自子组件的消息：{{someEventMessage}}</p>
</template>

<script>
import Child from "./Child.vue";
export default {
    data() {
        return {
            message:"Parent向child传递的动态数据",// 动态字符串数据
            age: 20,// 动态数字数据
            names:["张三","李四","王五"],/// 动态数组数据
            obj: {  // 动态对象数据
                id:"001",
                name: "张三",
                age: 25
            },
            someEventMessage:""
        }
    },
    methods: {
        handleSomeEvent(event) {
            console.log("父组件触发了someEvent事件", event);
            this.someEventMessage=event
            
            
    }},

  components: {
    Child,
  },
};
</script>

<!-- 加scoped 不然样式会在全局都生效-->
<style scoped>
h3 {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
  box-sizing: border-box;
  margin-top: 50px;
  background: #999;
}
</style>
